<template>
    <div class="Accvip">
        <div class="usernamebbox">
           <el-row :gutter="40" >
              <el-col :xs="24" :md="12" :lg="12" :xl="12">
                    <p><i class="el-icon-user-solid"></i> qiubai8030140-linshi</p>
                </el-col>
                <el-col :xs="24" :md="12" :lg="12" :xl="12">
                    <p><span>帐号状态：</span><u>正常</u></p>
                </el-col>
                 <el-col :xs="24" :md="12" :lg="12" :xl="12">
                    <p><span>联系人姓名：</span>金海成</p>
                </el-col>
                 <el-col :xs="24" :md="12" :lg="12" :xl="12">
                    <p><span>联系地址：</span>上海市闵行区新源路1356号正珏科技园A座502</p>
                </el-col>
                  <el-col :xs="24" :md="12" :lg="12" :xl="12">
                    <p><span>会员电子邮件：</span>12*******1@qq.com</p>
                </el-col>
                 <el-col :xs="24" :md="12" :lg="12" :xl="12">
                    <p><span>会员手机号码：</span> 186********696</p>
                </el-col>
                  <el-col :xs="24" :md="12" :lg="12" :xl="12">
                    <p><span>邮编：</span> 201109</p>
                </el-col>
            </el-row>
        </div>
        <div class="title_bt">
            <div class="bt" @click="adduser()">新增</div>
            <div class="search">
                <el-input v-model="searchinput" placeholder="请输入搜索的内容"></el-input>
                <div class="button"><i class="el-icon-search"></i></div>
            </div>
        </div>
        <el-table :data="tableData" style="width: 100%" class="tablebox">
            <el-table-column prop="name" label="姓名" width="150"></el-table-column>
            <el-table-column prop="en_name" label="用户名" width="250"></el-table-column>
            <el-table-column prop="list" label="功能列表"  ></el-table-column>
            <el-table-column prop="tips" label="备注" width="200"></el-table-column>
            <el-table-column class-name="status-col"  label="操作" width="180"  align="center"  fixed="right">
                <template slot-scope="{ row, $index }">
                    <kt-button icon="el-icon-edit" size='mini'  label="修改" perms="sys:adminlist:edit" type="primary" @click="handleUpdate(row,$index)"/>
                    <kt-button icon="el-icon-delete" size='mini' label="删除" perms="sys:adminlist:delete" type="danger" @click="handleDelete(row,$index)"/>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="pageswarp"
            :background="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=pages
            :page-size="20"
            layout="total, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
         <!-- 弹出修改用户信息的表单 -->
        <el-drawer
            :title="usertitle"
            :visible.sync="drawer"
            :before-close="handleClose"
            custom-class="demo-drawer"
            ref="drawer"
             size="90%">
                <div class="demo-drawer__content">
                    <div class="demo-drawer__content_from">
                        <div class="from">
                            <el-form :model="userForm" :rules="rules" ref="userForm"  label-width="100px" >
                                <el-form-item label="姓名：">
                                    <el-input v-model="userForm.name"></el-input>
                                    <p>最多输入100个字符</p>
                                </el-form-item>
                                <el-form-item label="用户名：" prop="username">
                                    <el-input v-model="userForm.username"></el-input>
                                     <p>用户名允许使用大小写英文字母，中文，数字</p>
                                </el-form-item>
                                 <el-form-item label="密码："   prop="userpasswd">
                                    <el-input  type="password"  v-model="userForm.userpasswd"  ></el-input>
                                  <p>至少6位，最长32位，必须包含大小写字母，数字，除空格以外的特殊符号</p>
                                </el-form-item>
                                <el-form-item label="确认密码："   prop="checkpasswd">
                                    <el-input type="password" v-model="userForm.checkpasswd"  ></el-input>
                                     <p>请重复上面输入的密码以确认输入正确</p>
                                </el-form-item>
                                 <el-form-item label="权限设置：" >
                                     <el-button type="primary" @click="premission()">权限设置</el-button>
                                </el-form-item>
                                <el-form-item label="电子邮箱："   prop="email">
                                    <el-input v-model="userForm.email"></el-input>
                                     <p>请输入使用的二级账号人员的邮箱，以方便其激活二级账号</p>
                                </el-form-item>
                                 <el-form-item label="备注：">
                                     <div class="textarea">
                                        <div class="bt">选填</div>
                                        <el-input type="textarea" :autosize='{minRows: 4,maxRows: 10}' v-model="userForm.des"  ></el-input> 
                                     </div>
                                </el-form-item>
                            </el-form>
                            
                        </div>
                        <div class="demo-drawer__footer">
                            <el-button @click="handleClose">取 消</el-button>
                            <el-button type="primary"  @click="submitForm('userForm')" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                        </div>
                    </div>
                <!-- 弹出修改用户权限的表单 -->
                <el-drawer
                    title="用户权限"
                    :append-to-body="true"
                     custom-class="demo-drawer"
                    :visible.sync="innerDrawer" size="50%">
                     <div class="demo-drawer__content">
                        <div class="demo-drawer__content_from">
                            <div class="from">
                                <el-tree
                                    ref="tree"
                                    :data="treearr"
                                    show-checkbox
                                    default-expand-all
                                    node-key="label"
                                    :default-checked-keys="userForm.router"
                                    :props="defaultProps">
                                </el-tree>
                            </div>
                            <div class="demo-drawer__footer">
                                <el-button type="primary" @click="opentree">确定</el-button>
                                <span class="but" @click="innerDrawer=false">取 消</span>
                                <div class="fr">
                                     <el-checkbox v-model="checkedtreearr" @change='checked_treearr'>全选</el-checkbox>
                                </div>
                            </div>

                        </div>
                    </div>
                </el-drawer>
                </div>
        </el-drawer>

    </div>
</template>
<script>
import KtButton from "@/components/elbutton"
    export default {
        name:'Accvip',
        data(){
            // 输入密码
            var validatePass = (rule, value, callback) => {
                var regusername =  /(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{6,32}/;
                if (value === '') {
                callback(new Error('请输入密码'));
                } else if (!regusername.test(value) ) {
                    callback(new Error('至少6位，最长32位，必须包含大小写字母，数字，除空格的特殊符号'));
                }else {
                    if (this.userForm.checkpasswd !== '') {
                        this.$refs.userForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            // 输入密码重复的密码
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                callback(new Error('请再次输入密码'));
                } else if (value !== this.userForm.userpasswd) {
                callback(new Error('两次输入密码不一致!'));
                } else {
                callback();
                }
            };
            // 验证邮箱
            var validateemail= (rule, value, callback) => {
                var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                if (value === '') {
                callback(new Error('请输入邮箱'));
                } else if (!regEmail.test(this.userForm.email) ) {
                callback(new Error('输入的邮箱格式不正确'));
                } else {
                callback();
                }
            };
            return{
                pages:1,
                searchinput:'',  //顶部的搜索栏目
                tableData: [   //表格的数据
                    {
                        name: '肘子1',
                        en_name: 'qiubai8030140-zhouzichen',
                        list:'订单管理、 广告投放管理、 物料管理、 整体报告、 资源报告(代码位报告,代码位分组报告,网站报告)、 投放报告(订单报告,广告报告,物料报告,销售业绩报告)、 收益报告、 自定义查询、 内容联盟报告',
                        tips: 'Zhouzichen123'
                    },
                    {
                        name: '肘子2',
                        en_name: 'qiubai8030140-zhouzichen',
                        list:'订单管理、 广告投放管理、 物料管理、 整体报告、 资源报告(代码位报告,代码位分组报告,网站报告)、 投放报告(订单报告,广告报告,物料报告,销售业绩报告)、 收益报告、 自定义查询、 内容联盟报告',
                        tips: 'Zhouzichen123'
                    },
                    {
                        name: '肘子3',
                        en_name: 'qiubai8030140-zhouzichen',
                        list:'订单管理、 广告投放管理、 物料管理、 整体报告、 资源报告(代码位报告,代码位分组报告,网站报告)、 投放报告(订单报告,广告报告,物料报告,销售业绩报告)、 收益报告、 自定义查询、 内容联盟报告',
                        tips: 'Zhouzichen123'
                    },
                    {
                        name: '肘子4',
                        en_name: 'qiubai8030140-zhouzichen',
                        list:'订单管理、 广告投放管理、 物料管理、 整体报告、 资源报告(代码位报告,代码位分组报告,网站报告)、 投放报告(订单报告,广告报告,物料报告,销售业绩报告)、 收益报告、 自定义查询、 内容联盟报告',
                        tips: 'Zhouzichen123'
                    },
                ],
                usertitle:'新建二级账号',
                loading: false,
                drawer: false,
                innerDrawer: false,
                userForm:{
                    name:'',
                    username:'',
                    userpasswd:'',
                    checkpasswd:'',
                    email:'',
                    des:'',
                    router:['首页'],
                },
                rules:{
                    name: [
                        { required: true, message: '最多输入100个字符', trigger: 'blur' }
                    ],
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 100, message: '用户名允许使用大小写英文字母，中文，数字', trigger: 'blur' }
                    ],
                    userpasswd: [
                         {required: true, validator: validatePass, trigger: 'blur' },
                        // {required: true, min: 6, max:32, message: '至少6位，最长32位，必须包含小写字母 ，大写字母和阿拉伯数字三种字符', trigger: 'blur' }
                    ],
                    checkpasswd: [
                        { required: true,validator: validatePass2, trigger: 'blur' },
                    ],
                    email: [
                          {required: true, validator: validateemail, trigger: 'blur' },
                        // { required: true, message: '请输入使用的二级账号人员的邮箱，以方便其激活二级账号', trigger: 'blur' }
                    ]
                    
                },
                treearr:[],
                checkedtreearr:false,
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        },
        components:{
            KtButton,
        },
        mounted(){
             this.getTreeDate(this.$router.options.routes,this.treearr);  //获取路由菜单
        },
        methods:{
            search(){
                console.log(this.selectvalue,this.timevalue)
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            // 新增用户
            adduser(){
                this.drawer=true;
            },
            // 修改用户
            handleUpdate(item,index){
                console.log(item,index);
                this.userForm=item;
                this.drawer=true;
                this.usertitle='修改二级账号'
            },
            // 显示权限
            premission(){
               this.innerDrawer=true;
               if( this.userForm.router.length==0){
                let arr_=[];
                this.userrouter(this.treearr,arr_);
                this.userForm.router=arr_
             }
            },
             // 删除用户
            handleDelete(item,index){
                this.$confirm('确定要删除用户数据吗？','确认删除',{customClass:'layeralterelbox'}) .then(()  => {
                    console.log(item,index);
                    this.tableData.splice(index,1);
                }).catch(()  => {});

            },
            // 确认关闭新建二级账号
            handleClose() {
                this.$confirm('确定要关闭吗','确认信息',{customClass:'layeralterelbox'}) .then(()  => {
                     this.drawer=false;
                }).catch(()  => {});
            },
            // 提交个人信息
            submitForm(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                            console.log(this.userForm);
                            this.loading = true;
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                            this.loading = false;
                            }, 400);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 关闭权限树菜单
            opentree(){
              this.innerDrawer=false;
              this.userForm.router=this.$refs.tree.getCheckedKeys();
               console.log( this.userForm.router);
            },
            //树菜单全选
            checked_treearr(val){
                this.$refs.tree.setCheckedNodes(val ? this.treearr : []);
            },
            // 获取树菜单
            getTreeDate(obj,arrt){
                obj.forEach((item)=>{
                    if(typeof item.hidden==='undefined'){
                          if(item.meta){
                            let obj={label:item.meta.title,children:[]};
                            arrt.push(obj)
                            if(item.children){
                                this.getTreeDate(item.children,obj.children)
                            }
                          }else{
                             arrt.push({label:item.children[0].meta.title,children:[]})
                          }
                    }
                })
            },
            // 获取选中的树菜单
              userrouter(obj,arr){
                   obj.forEach((item)=>{
                       if(item.label){
                        arr.push(item.label)
                        if(item.children){
                            this.userrouter(item.children,arr)
                        }
                        }else{
                             arr.push(item.item.children[0].label)
                        }
                    })
                }
           
        }
    }
</script>
<style lang="scss" scoped>
   .usernamebbox{
      background-color: #e3eaf9;
      padding: 20px;
      margin-bottom: 20px;
      border-radius: 5px;
      line-height: 30px;
      font-size: 14px;
      p{
        margin: 10px 0;
        color: #606266;
        i{
            font-size: 20px;
            margin-right: 5px;
        }
        & > span{
            min-width: 115px;
            display: inline-block;
            
        }
      }
      u{
        text-decoration: none;
        color:#e46f31
      }
       
   } 
</style>